<template>
  <el-table :data="tableData" style="width: 100%" >
    <el-table-column type="expand" @expand-change="handleExpandChange">
      <template #default="scope">
        <el-tag v-for="tag in scope.row.attr_vals" :key="tag" class="mx-1" closable :disable-transitions="false"
          @close="handleClose(scope.row,tag)">
          {{ tag }}
        </el-tag>
        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small"
          @keyup.enter="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)" />
        <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
          + 增加标签
        </el-button>
      </template>
    </el-table-column>
    <el-table-column prop="attr_name" label="参数名称" width="800" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click.prevent="removeParam(scope.$index)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-input v-if="paramInputVisible" ref="paramInputRef" v-model="paramInputValue" class="mt-4" style="width: 100%" placeholder="请输入内容" @keyup.enter="handleParamInputConfirm"
    @blur="handleParamInputConfirm"/>
  <el-button class="mt-4" style="width: 100%" @click="showParamInput">添加参数</el-button>
</template>

<script setup>
import { ref, nextTick,defineEmits,defineProps,watch,onMounted } from 'vue'

const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref()
const handleClose = (row,tag) => {
  row.attr_vals.splice(row.attr_vals.indexOf(tag), 1)
}


const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

const handleInputConfirm = (row) => {
  if (inputValue.value) {
    row.attr_vals.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}


const paramInputVisible = ref(false);
const paramInputValue = ref('');

const paramInputRef = ref(null);
const removeParam = (index) => {
  tableData.value.splice(index, 1)
}



function showParamInput() {
  paramInputVisible.value = true;
  nextTick(() => {
    paramInputRef.value.focus();
  });
}

const handleParamInputConfirm = () => {
  if (paramInputValue.value) {
    tableData.value.push({ attr_name: paramInputValue.value, attr_vals: [] });
  }
  paramInputVisible.value = false;
  paramInputValue.value = '';
}

const tableData = ref([

]);

const currentExpandedRow = ref(null);

function handleExpandChange(row) {
  if (currentExpandedRow.value !== row) {
    currentExpandedRow.value = row;
  } else {
    currentExpandedRow.value = null;
  }
}
const { data } = defineProps(["data"]); // 解构 props 中的 data
const emit = defineEmits(['update_param']);

onMounted(()=>{
  // 确保 data 是一个响应式引用，并且正确地赋值给 tableData
  if (data instanceof Object && 'value' in data) {
    // data 是一个 ref，需要访问其 .value 属性
    tableData.value = data.value;
  } else {
    // data 可能直接是一个数组
    tableData.value = data;
  }
});

watch(tableData, (newVal)=>{
  // 直接使用 newVal，因为它已经是 tableData 的值
  emit('update_param', newVal);
}, {
  deep: true
});


</script>

<style scoped lang="scss"></style>